<template>
  <div class="playerBox">
    <div
      v-show="!noVideo"
      :id="'playerContent' + props.data.name"
      class="playerContent"
    ></div>
    <span v-if="noVideo" class="spanImg">
      <span class="img"></span>
      <span class="textContent">无视频</span>
    </span>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref, watch, defineProps } from "vue";

// eslint-disable-next-line no-undef
const ckplayer = window.ckplayer;

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      name: "",
      url: "",
      isLive: true,
      flashplayer: false,
      autoplay: true,
      videoUrl: "暂无原始流地址",
    }),
  },
});
let playerObj = null;

onMounted(() => {
  console.log(props.data);
  setPlay(props.data);
});
const setPlay = (val) => {
  noVideo.value = !val.url;
  playData.urlName = val.name;
  playData.url = val.url;
  playData.isLive = val.isLive ? val.isLive : playData.isLive;
  playData.flashplayer = val.flashplayer
    ? val.flashplayer
    : playData.flashplayer;
  playData.autoplay = val.autoplay ? val.autoplay : playData.autoplay;
  playData.videoUrl = val.videoUrl ? val.videoUrl : playData.videoUrl;
  playVideo();
};
watch(
  () => props.data,
  (val) => {
    setPlay(val);
  },
  {
    deep: true,
  }
);
const noVideo = ref(true);
const playData = reactive({
  isLive: true,
  flashplayer: false,
  autoplay: true,
  url: "",
  videoUrl: "暂无原始流地址",
});

const playVideo = () => {
  let url = playData.url || "";
  let plug;
  if (url.indexOf(".flv") > 0 || url.indexOf(".FLV") > 0) {
    plug = "flv.js";
  } else if (url.indexOf(".m3u8") > 0 || url.indexOf(".M3U8") > 0) {
    plug = "hls.js";
  } else {
    plug = "mpegts.js";
  }
  let videoObject = {
    playerID: "playerContent" + playData.urlName,
    container: "#playerContent" + playData.urlName, //“#”代表容器的ID，“.”或“”代表容器的class
    variable: "player", //该属性必需设置，值等于下面的new chplayer()的对象
    autoplay: playData.autoplay,
    loop: true,
    html5m3u8: true,
    flashplayer: playData.flashplayer,
    live: playData.isLive, //是否是直播
    logoShow: false,
    seek: 0,
    volume: "1",
    video: playData.url, //视频地址,
    videoUrl: playData.videoUrl,
    plug,
  };
  playerObj = new ckplayer(videoObject);
  console.log(playerObj);
};
</script>
<style lang="scss" scoped>
.playerBox {
  width: 100%;
  height: 100%;

  .playerContent {
    width: 100%;
    height: 100%;
  }
}
</style>
